import React from 'react';
import { Drawer, Descriptions, Steps, Popover, Card, StepProps } from 'antd';
import { GridContent } from '@ant-design/pro-layout';
import { DataItem, FlagEnum, FormDrawerProps } from '@/types/global';
import { TaskDetailItem } from '@/types/task';
import { getItemValue } from '@/utils/commons';
import { dateFormat } from '@/utils/utils';

type ViewTaskProps<T> = FormDrawerProps<T> & {
  flag?: FlagEnum
  taskStatusData: DataItem[];
}

const ViewTaskDrawer: React.FC<ViewTaskProps<TaskDetailItem>> = (props) => {

  const onClose = () => {
    // 先清除form表单
    const {onHandlerCancel} = props;
    if (onHandlerCancel) {
      onHandlerCancel();
    }
  }

  const { formData, drawerWidth, drawerVisible, taskStatusData } = props;
  const { startDate, endDate, status } = formData;
  const taskStatus = getItemValue(taskStatusData, status);
  const taskStatusStr = `${status}-${taskStatus}`;
  const systemStr = `${formData.systemCode}-${formData.systemName}`;
  const clstStr = `${formData.clstCode}-${formData.clstName}`;
  const appStr = `${formData.appCode}-${formData.appName}`;
  // console.info(`flag: ${flag}`);
  const customDot = (
    dot: React.ReactNode,
    {
      status,
    }: {
      status: string;
    },
  ) => {
    if (status === 'process') {
      return (
        <Popover placement="topLeft" arrowPointAtCenter content={taskStatusStr}>
          {dot}
        </Popover>
      );
    }
    return dot;
  };

  const stepItems = taskStatusData.filter(item => item.key !== '0').map((item) => {
    const description = `${item.key}-${item.value}`;
    const stepItem: StepProps = {
      title: item.value,
      description
    }
    return stepItem;
  });

  return (
    <Drawer
      open={drawerVisible}
      title="任务详情"
      placement="right"
      width={drawerWidth}
      onClose={onClose}
    >
      <GridContent>
        <Card title='流程进度' style={{ marginBottom: 16 }}>
          <Steps
            direction={'horizontal'}
            progressDot={customDot}
            current={parseInt(status) - 1}
            items={stepItems}
          />
        </Card>
        <Card title='任务信息' style={{ marginBottom: 16 }}>
          <Descriptions>
            <Descriptions.Item label="任务名称">{formData.taskName}</Descriptions.Item>
            <Descriptions.Item label="任务状态">{taskStatusStr}</Descriptions.Item>
            <Descriptions.Item label="开发人员">{formData.developer}</Descriptions.Item>
            <Descriptions.Item label="测试人员">{formData.tester}</Descriptions.Item>
            <Descriptions.Item label="主开人员">{formData.auditor}</Descriptions.Item>
            <Descriptions.Item label="设计人员">{formData.designer}</Descriptions.Item>
            <Descriptions.Item label="开始时间">{dateFormat(startDate)}</Descriptions.Item>
            <Descriptions.Item label="结束时间">{dateFormat(endDate)}</Descriptions.Item>
            <Descriptions.Item label="备注">{formData.comment}</Descriptions.Item>
          </Descriptions>
        </Card>
        <Card title='交易信息' style={{ marginBottom: 16 }}>
          <Descriptions>
            <Descriptions.Item label="交易功能码">{formData.funcCode}</Descriptions.Item>
            <Descriptions.Item label="交易名称">{formData.funcName}</Descriptions.Item>
            <Descriptions.Item label="所属系统">{systemStr}</Descriptions.Item>
            <Descriptions.Item label="所属集群">{clstStr}</Descriptions.Item>
            <Descriptions.Item label="所属应用">{appStr}</Descriptions.Item>
          </Descriptions>
        </Card>
        <Card title='需求信息' style={{ marginBottom: 16 }}>
          <Descriptions>
            <Descriptions.Item label="需求编号">{formData.cqCode}</Descriptions.Item>
            <Descriptions.Item label="需求名称">{formData.cqName}</Descriptions.Item>
          </Descriptions>
        </Card>
      </GridContent>
    </Drawer>
  );
}

export default ViewTaskDrawer;